<script lang="ts" setup>
import type { EchartsUIType } from '@vben/plugins/echarts';
import { onMounted, ref } from 'vue';

import { EchartsUI, useEcharts } from '@vben/plugins/echarts';
const chartRef = ref<EchartsUIType>();
const { renderEcharts } = useEcharts(chartRef);
const data = ref([
  { name: '治安事件', value: 275, proportion: '23.00%' },
  { name: '应急事件', value: 581, proportion: '23.00%' },
  { name: '交通事件', value: 316, proportion: '23.00%' },
  { name: '其他事件', value: 397, proportion: '23.00%' },
]);
onMounted(() => {
  renderEcharts({
    grid: {
      top: '5%',
      left: '1%',
      right: '1%',
      bottom: '5%',
    },
    series: [
      {
        animationEasing: 'exponentialInOut',
        avoidLabelOverlap: false,
        // animationType: 'scale',
        center: ['30%', '50%'],
        color: ['#19A8EF', '#7C5BEE', '#24E5F1', '#EEBF1B'],
        data: data.value.sort((a, b) => {
          return a.value - b.value;
        }),
        label: {
          show: false,
        },
        radius: ['60%', '80%'],
        type: 'pie',
        itemStyle: {
          borderWidth: 3,
          borderColor: '#021314', // 使用背景色作为边框色，形成空隙效果
        },
      },
    ],
    legend: {
      orient: 'vertical',
      right: 'right',
      top: '16%',
      padding: [20, 60],
      icon: 'roundRect',
      itemWidth: 12,
      itemHeight: 12,
      textStyle: {
        color: '#fff',
        fontSize: 12,
      },
      formatter: function (name) {
        // 找到当前name对应的数据
        const item = data.value.find((d) => d.name === name);
        if (item) {
          return `${name}    ${item.value} ${item.proportion}`;
        }
        return name;
      },
    },

    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        // console.log(params);
        return (
          params.name + '<br/>' + params.value + ': ' + params.data.proportion
        );
      },
    },
  });
});
</script>

<template>
  <EchartsUI ref="chartRef" style="height: 100%" />
</template>
